<!DOCTYPE html>
<html lang="zh">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jQuery下拉选择框美化插件select-mania</title>
	<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="css/select-mania.css" rel="stylesheet" type="text/css">
	<link href="css/themes/select-mania-theme-darkblue.css" rel="stylesheet" type="text/css">
	<link href="css/themes/select-mania-theme-green.css" rel="stylesheet" type="text/css">
	<link href="css/themes/select-mania-theme-orange.css" rel="stylesheet" type="text/css">
	<link href="css/themes/select-mania-theme-red.css" rel="stylesheet" type="text/css">
	<link href="css/themes/select-mania-theme-square.css" rel="stylesheet" type="text/css">
	<style type="text/css">
.container {
	margin: 150px auto;
	max-width: 680px;
}
</style>
	</head>
	<body>
<div class="container">
		<h1>jQuery select-mania 插件示例演示</h1>
		<h2>Square+Red Theme</h2>
		<select class="demo-1">
		<option value="sx">初中数学</option>
		<option value="yw">初中语文</option>
		<option value="yy">初中英语</option>
		<option value="wl">初中物理</option>
	</select>
		<h2>Darkblue + Large</h2>
		<select class="demo-2">
		<option value="sx">初中数学</option>
		<option value="yw">初中语文</option>
		<option value="yy">初中英语</option>
		<option value="wl">初中物理</option>
	</select>
		<h2>Orange + Medium</h2>
		<select class="demo-3">
		<option value="sx">初中数学</option>
		<option value="yw">初中语文</option>
		<option value="yy">初中英语</option>
		<option value="wl">初中物理</option>
	</select>
		<h2>Green + No Controls</h2>
		<select class="demo-4">
		<option value="sx">初中数学</option>
		<option value="yw">初中语文</option>
		<option value="yy">初中英语</option>
		<option value="wl">初中物理</option>
	</select>
		<h2>带图标的optgroup</h2>
		<select class="demo-5">
		<optgroup data-icon="fa fa-user" label="Group">
			<option value="1" data-icon="fa fa-weixin">微信</option>
			<option value="2" data-icon="fa fa-weibo">微博</option>
			<option value="4" data-icon="fa fa-qq">QQ</option>
			<option value="5" data-icon="fa fa-facebook">Facebook</option>
			<option value="6" data-icon="fa fa-github">github</option>
			</optgroup>
	</select>
	</div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> 
<script src="js/select-mania.js"></script> 
<script type="text/javascript">
		$('.demo-1').selectMania({
		    size: 'small', 
		    themes: ['square','red'], 
		    placeholder: 'Please select me!',
			removable: true,
					search: true,
		});
		$('.demo-2').selectMania({
		    size: 'large', 
		    themes: ['darkblue'], 
		    placeholder: 'Please select me!',
			removable: true,
					search: true
		});
		$('.demo-3').selectMania({
		    themes: ['orange'], 
		    placeholder: 'Please select me!',
			removable: true,
					search: true
		});
		$('.demo-4').selectMania({
		    themes: ['green'], 
		    placeholder: 'Please select me!'
		});
		$('.demo-5').selectMania({
		    size: 'small', 
		    themes: ['square','blue'], 
		    placeholder: 'Please select me!',
			removable: true,
			search: true,
		});
	</script>
</body>
</html>